<template>
  <!-- v-pagePermissions="pagePermissions"  -->
  <el-card class="register mxauto">
    <h1 class="title">注册</h1>
    <el-form
      ref="ruleFormRef"
      class="mt30"
      status-icon
      :rules="rules"
      :model="ruleForm"
      label-width="80px"
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input
          v-model="ruleForm.password"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="验证密码" prop="checkPass">
        <el-input
          v-model="ruleForm.checkPass"
          type="password"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <div class="aic">
          <el-input v-model="ruleForm.email"></el-input>
          <el-button type="primary" @click="getCode" class="ml15">{{
            codeText
          }}</el-button>
        </div>
      </el-form-item>
      <el-form-item label="验证码" prop="code">
        <el-input v-model="ruleForm.code" type="text"></el-input>
      </el-form-item>
    </el-form>
    <el-button class="w100" type="primary" @click="submitForm(ruleFormRef)"
      >创建</el-button
    >
    <div class="mt30">
      <el-link @click.native="handleGologin" type="primary">登录</el-link>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import type { ElForm } from "element-plus";
import type { Response } from "/@ts/axios/index";
import useRegular from "/@ts/hooks/regular";
// import {userinfoAddUser,getEmailCode} from '/@ts/axios/urlApi/register';
let emit = defineEmits(["handleGologin"]);

const handleGologin = () => {
  emit("handleGologin", false);
};
const ruleFormRef = ref<InstanceType<typeof ElForm>>();

const internalInstance = getCurrentInstance(); //获取当前实例
// const route = internalInstance?.appContext.config.globalProperties.$route;
const { regEmail } = useRegular();
const router = useRouter();
const route = useRoute();
let codeText = ref("获取验证码");
let countdown: number = 60;
const setTime = () => {
  if (countdown == 0) {
    codeText.value = "获取验证码";
    countdown = 60; //60秒过后button上的文字初始化,计时器初始化;
    return;
  } else {
    codeText.value = countdown + "s";
    countdown--;
  }
  setTimeout(function () {
    setTime();
  }, 1000); //每1000毫秒执行一次
};
const getCode = () => {
  if (!regEmail(ruleForm.email)) {
    ElMessage.warning("请输入邮箱");
    return;
  }

  setTime();
  // getEmailCode({
  //   email:ruleForm.email
  // })
  // .then(()=>{
  //   ElMessage.success("发送成功")
  // })
};
/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/
const validatePass = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    if (ruleForm.checkPass !== "") {
      if (!ruleFormRef.value) return;
      ruleFormRef.value.validateField("checkPass", () => null);
    }
    callback();
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请验证密码"));
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一致!"));
  } else {
    callback();
  }
};
const rules = reactive({
  code: [
    {
      required: true,
      message: "请输入邮箱验证码",
      trigger: "blur",
    },
  ],
  username: [
    {
      required: true,
      message: "请输入名字",
      trigger: "blur",
    },
  ],
  email: [
    {
      required: true,
      type: "email",
      message: "请输入邮箱地址",
      trigger: ["blur", "change"],
    },
  ],
  password: [{ required: true, validator: validatePass, trigger: "blur" }],
  checkPass: [{ required: true, validator: validatePass2, trigger: "blur" }],
});
const ruleForm = reactive({
  username: "19939962786",
  checkPass: "123456",
  password: "123456",
  email: "229236940@qq.com",
  code: "JXUY2Q",
});
const submitForm = (formEl: InstanceType<typeof ElForm> | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      //       userinfoAddUser(ruleFormRef._value.model)
      //       .then((res:any)=>{
      //  emit('handleGologin',false)
      //       })
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
const handleCancel = () => {
  window.close();
};
onMounted(() => {});
</script>

<style scoped lang="scss">
.register {
  // margin: 0 auto;
  // margin-top: 100px;
  // width: 600px;
  // padding: 30px;

  width: 500px;
  position: relative;
  left: 0;
  top: 100px;
  padding: 34px;
  border-radius: 7px;
}
</style>
